<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>上传图片</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .choose img{
            width: 100px;
            height: 100px;
        }
        .choose input{
            display: none;
        }
        button{
            margin: 10px;
        }
    </style>
</head>
<body>
    <form action="">
        <div class="choose">
            <img src="img/add.png" alt="">
            <input type="file">
            <img src="img/add.png" alt="">
            <input type="file">
            <img src="img/add.png" alt="">
            <input type="file">
        </div>
        <div class="up">
            <button type="button">添加</button>
        </div>
    </form>
</body>
</html>
<script>
    $('button').click(function(){
        $('.choose').append('<img src="img/add.png"></img>');
        $('.choose').append('<input type="file">');
        clickF();
    });
    clickF();
    function clickF(){
        // index=0;
        $('img').each(function(){
            $(this).click(function(){
                $(this).next().click();
            });
        });
    }
    $('input[type=file]').each(function(){
        $(this).change(function(){
            // prop()   返回属性的值
            // $(selector).prop(property)  
            var file=$(this).prop('files')[0];
            if(file.type.startsWith('image')){
                // prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
                $(this).prev().attr('src',URL.createObjectURL(file));
            }else{
                alert('只能上传图片');
            }
        });
    });
</script>